<!--
 * @Description: 转化分析
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import { useOperation } from '@fl/api/data-analysis'
import { useRouter } from 'vue-router'

import type { DateRange } from '../types'

const router = useRouter()

const oDateRange = inject<Ref<DateRange>>('dateRange', ref({ endTime: '', startTime: '' }))
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const { data: oResData } = useOperation(oDateRange)

// 领券-核销转化率
const hxzhl = computed(() => {
    const hexiao = oResData.value?.userExchange
    const lingquan = oResData.value?.userCoupon
    if (typeof hexiao !== 'number' || typeof lingquan !== 'number') {
        return '--'
    }
    if (hexiao === 0 || lingquan === 0) {
        return '0%'
    }
    else {
        return `${(hexiao / lingquan * 100).toFixed(2)}%`
    }
})

// 核销-网签转化率
const wqzhl = computed(() => {
    const wangqian = oResData.value?.onlineSign
    const hexiao = oResData.value?.userExchange
    if (typeof wangqian !== 'number' || typeof hexiao !== 'number') {
        return '--'
    }
    if (wangqian === 0 || hexiao === 0) {
        return '0%'
    }
    else {
        return `${(wangqian / hexiao * 100).toFixed(2)}%`
    }
})

// 网签-补贴转化率
const btzhl = computed(() => {
    const butie = oResData.value?.userSubsidy
    const wangqian = oResData.value?.onlineSign
    if (typeof butie !== 'number' || typeof wangqian !== 'number') {
        return '--'
    }
    if (butie === 0 || wangqian === 0) {
        return '0%'
    }
    else {
        return `${(butie / wangqian * 100).toFixed(2)}%`
    }
})

// 领券-契税转化率
const qszhl = computed(() => {
    const butie = oResData.value?.userSubsidy
    const lingquan = oResData.value?.userCoupon
    if (typeof butie !== 'number' || typeof lingquan !== 'number') {
        return '--'
    }
    if (butie === 0 || lingquan === 0) {
        return '0%'
    }
    else {
        return `${(butie / lingquan * 100).toFixed(2)}%`
    }
})

function handleEmptyVal(value) {
    if (value === null || value === undefined) {
        return '--'
    }
    else {
        return value
    }
}

function toGetCouponDetails(type) {
    router.push(`/data-analysis/coupon-statistics?startDate=${oDateRange.value.startTime}&endDate=${oDateRange.value.endTime}&type=${type}`)
}
</script>

<template>
    <div class="module-panel">
        <h5 class="module-title">
            转化分析
        </h5>

        <div class="chart-container">
            <div class="chart-bar">
                <ul class="key-list bg-lan">
                    <li class="key-item">
                        <p class="key-name">
                            领取人数
                        </p>

                        <span class="key-value link"
                              @click="toGetCouponDetails('receive')"
                        >{{ handleEmptyVal(oResData?.userCoupon) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            领取张数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.haveCoupon) }}</span>
                    </li>
                </ul>

                <ul class="key-list bg-lv">
                    <li class="key-item">
                        <p class="key-name">
                            核销人数
                        </p>

                        <span class="key-value link"
                              @click="toGetCouponDetails('writeOff')"
                        >{{ handleEmptyVal(oResData?.userExchange) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            使用张数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.useCoupon) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            意向签约数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.earnestSign) }}</span>
                    </li>
                </ul>

                <ul class="key-list bg-cheng">
                    <li class="key-item">
                        <p class="key-name">
                            网签人数
                        </p>

                        <span class="key-value link"
                              @click="toGetCouponDetails('writeOff')"
                        >{{ handleEmptyVal(oResData?.onlineSign) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            网签套数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.userOnlineHouse) }}</span>
                    </li>
                </ul>

                <ul class="key-list bg-hong">
                    <li class="key-item">
                        <p class="key-name">
                            补贴申请总人数(线上+线下)
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.subsidyApprove) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            补贴申请人数(线上)
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.userSubsidy) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            补贴申请套数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.subsidyHouse) }}</span>
                    </li>

                    <li class="key-item">
                        <p class="key-name">
                            审核通过数
                        </p>

                        <span class="key-value">{{ handleEmptyVal(oResData?.approveComplete) }}</span>
                    </li>
                </ul>
            </div>

            <div class="bg-patch" />

            <img class="img-funnel"
                 src="../images/img_funnel.png"
            >

            <img class="img-path1"
                 src="../images/img_path1.png"
            >

            <div class="rate-box rate1">
                <p class="rate-name">
                    领券-核销转化率
                </p>

                <span class="rate-value">{{ hxzhl }}</span>
            </div>

            <img class="img-path2"
                 src="../images/img_path2.png"
            >

            <div class="rate-box rate2">
                <p class="rate-name">
                    核销-网签转化率
                </p>

                <span class="rate-value">{{ wqzhl }}</span>
            </div>

            <img class="img-path3"
                 src="../images/img_path3.png"
            >

            <div class="rate-box rate3">
                <p class="rate-name">
                    网签-补贴转化率
                </p>

                <span class="rate-value">{{ btzhl }}</span>
            </div>

            <img class="img-path4"
                 src="../images/img_path4.png"
            >

            <div class="rate-box rate4">
                <p class="rate-name">
                    领券-契税转化率
                </p>

                <span class="rate-value">{{ qszhl }}</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.chart-container {
    position: relative;
}

.chart-bar {
    width: 100%;
    padding-right: 325px;

    .key-list {
        display: flex;
        width: 100%;

        .key-item {
            width: 20%;
            padding: 14px 0;
            text-align: center;

            .key-name {
                color: #86909c;
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 4px;
            }

            .key-value {
                color: #1d2129;
                font-size: 16px;
                font-weight: 600;
                line-height: 22px;
            }

            .link {
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .bg-lan {
        background-color: #e7f1ff;
    }

    .bg-lv {
        background-color: #f0fff0;
    }

    .bg-cheng {
        background-color: #fff8f0;
    }

    .bg-hong {
        background-color: #fff0f0;
    }
}

.bg-patch {
    position: absolute;
    right: 0;
    top: 0;
    width: 325px;
    height: 297px;
    background-color: #fff;
}

.img-funnel {
    position: absolute;
    right: 155px;
    top: 0;
    width: 344px;
    height: 297px;
}

.img-path1 {
    position: absolute;
    right: 118px;
    top: 35px;
    width: 114.5px;
    height: 80px;
}

.img-path2 {
    position: absolute;
    right: 158px;
    top: 132px;
    width: 100.5px;
    height: 49px;
}

.img-path3 {
    position: absolute;
    right: 209px;
    top: 194px;
    width: 67px;
    height: 58px;
}

.img-path4 {
    position: absolute;
    right: 10px;
    top: 14px;
    width: 266px;
    height: 253px;
}

.rate-box {
    font-size: 12px;
    line-height: 16px;

    &.rate1 {
        position: absolute;
        right: 20px;
        top: 60px;
    }

    &.rate2 {
        position: absolute;
        right: 60px;
        top: 137px;
    }

    &.rate3 {
        position: absolute;
        right: 110px;
        top: 206px;
    }

    &.rate4 {
        position: absolute;
        right: 178px;
        bottom: -4px;
    }

    .rate-name {
        color: #4e5969;
    }

    .rate-value {
        color: #1d2129;
        font-weight: 600;
    }
}
</style>
